<template>
  <div>
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <i class="el-icon-s-unfold"></i>
            数据列表
            <div class="rightTop">
              <el-button @click="Add">添加</el-button>
            </div>
          </el-header>
          <el-main class="info-main padding-style">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="number" label="编号">
                <template slot-scope="scope">{{ scope.row.number}}</template>
              </el-table-column>
              <el-table-column prop="name" label="商品名称">
                <template slot-scope="scope">{{ scope.row.name}}</template>
              </el-table-column>
              <el-table-column prop="spuNum" label="货号">
                <template slot-scope="scope">{{ scope.row.spuNum}}</template>
              </el-table-column>
              <el-table-column prop="money" label="商品价格" prefix="￥">
                <template slot-scope="scope">{{ scope.row.money}}</template>
              </el-table-column>
              <el-table-column label="秒杀价格">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.seckillMoney"
                    style="font-style:normal"
                    class="unit"
                    @change="changes(scope.row.id,scope.row)"
                  >
                    <i slot="prefix">￥</i>
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column label="秒杀数量">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.seckillNum"
                    style="font-style:normal"
                    class="unit"
                    @change="changes(scope.row.id,scope.row)"
                  >
                    <i slot="prefix">￥</i>
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="surplus" label="剩余数量">
                <template slot-scope="scope">{{ scope.row.surplus}}</template>
              </el-table-column>
              <el-table-column label="限购数量">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.purchaseLimit"
                    style="font-style:normal"
                    class="unit"
                    @change="changes(scope.row.id,scope.row)"
                  >
                    <i slot="suffix">个</i>
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column label="排序">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.sort"
                    style="font-style:normal"
                    class="unit"
                    @change="changes(scope.row.id,scope.row)"
                  >
                    <i slot="suffix">类</i>
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" @click="deleteOne(scope.$index, scope.row)" type="text">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
    <div>
      <el-dialog :title="'添加商品'" :close-on-click-modal="false" :visible.sync="dialogVisible">
        <el-form :model="form" ref="form" style="width: 100%">
          <el-form-item>
            <span>
              <el-input v-model="goodsName" placeholder="商品名称" style="width: 200px">
                <i slot="suffix" class="el-icon-search"></i>
              </el-input>
            </span>
            <el-button type="primary" @click="addSec()" size="mini" class="addfrom">确定添加</el-button>
          </el-form-item>
        </el-form>
        <el-main class="info-main padding-style">
          <el-table
            :data="goodData"
            border
            style="width: 100%"
            ref="multipleTable"
            @selection-change="handleSelectionChange"
          >
            <el-table-column prop="goodsName" label="商品名称">
              <template slot-scope="scope1">{{ scope1.row.goodsName}}</template>
            </el-table-column>
            <el-table-column prop="goodsNum" label="货号">
              <template slot-scope="scope1">{{ scope1.row.goodsNum}}</template>
            </el-table-column>
            <el-table-column prop="goodsMoney" label="商品价格" prefix="￥">
              <template slot-scope="scope1">{{ scope1.row.goodsMoney}}</template>
            </el-table-column>
            <el-table-column label="操作" type="selection" width="55"></el-table-column>
          </el-table>
        </el-main>
        <el-footer class="info-foot">
          <el-checkbox @change="toggleSelection()" size="small">全选</el-checkbox>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-footer>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import seckillItemApi from "@/api/operate/seckillItem";
import seckillAddsApi from "@/api/operate/seckillAdds";
export default {
  data() {
    return {

      multipleSelection: [],
      // 分页
      pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
      total: 5,
      currentPage4: 1,

      //开起筛选
      selectrue: true,

      event:{
        id:"",
        seckillMoney:"",
        seckillNum:"",
        purchaseLimit:"",
        sort:""
      },

      checked: true,
      dialogVisible: false,
      form: {},
      goodsName: "",

      tableData: [],
      goodData: []
    };
  },
  watch: {
    goodsName: {
      handler(newVal, oldVal) {
        if (newVal != null) {
          this.indataMs(this.currentPage4, this.pageSize, newVal);
        } else {
          this.indataTwo(this.currentPage4, this.pageSize);
        }
      }
    }
  },
  methods: {
    changes(item,row){
      console.log(row.seckillMoney)
      console.log(item)
      if(row.seckillMoney!=null && row.seckillNum!=null && row.purchaseLimit!=null && row.sort!=null){
      var dto={"id":item,"seckillMoney":row.seckillMoney,"seckillNum":row.seckillNum,"purchaseLimit":row.purchaseLimit,"sort":row.sort};
      console.log(dto)
      seckillItemApi.getUpdateItemList(dto).then(Response =>{
        const rensr = Response.data;
          console.log(Response);
          if (rensr.code == 200) {
            this.indata();
          } else {
            this.$message({
              message: rensr.message,
              type: "warning"
            });
          }
      });
      };
    },


    Add() {
      this.dialogVisible = true;
      this.indataTwo(this.currentPage4, this.pageSize);
    },
    deleteOne(index, row) {
      var id = row.id;
      this.$confirm(
        "此操作将永久删除原因" + "<" + row.cause + ">" + "是否继续？",
        "提示",
        {
          type: "warning"
        }
      ).then(() => {
        seckillItemApi.getDeleteItemList(id).then(Response => {
          const rens = Response.data;
          console.log(Response);
          if (rens.code == 200) {
            this.indata();
          } else {
            this.$message({
              message: rens.message,
              type: "warning"
            });
          }
        });
      });
    },
    confirm(row) {
      console.log(row);
      this.dialogVisible = false;
    },
    //复选框
    handleSelectionChange(val) {
      this.multipleSelection = [];
      val.forEach(v => {
        this.multipleSelection[this.multipleSelection.length] = v.id;
      });
    },
    //多选框
    toggleSelection() {
      if (this.goodData) {
        this.goodData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //跳转添加
    addSec() {
      seckillAddsApi.getAddToItemList(this.multipleSelection).then(Response => {
        const psaa = Response.data;
        console.log(Response);
        if (psaa.code == 200) {
          this.dialogVisible = false;
          this.indata();
        } else {
          this.$message({
            message: psaa.message,
            type: "warning"
          });
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
      if (this.selectrue == true) {
        this.indataMs(this.currentPage4, this.pageSize, this.form.goodsName);
      } else {
        this.indataTwo(this.currentPage4, this.pageSize);
      }
    },
    handleCurrentChange(val) {
      this.currentPage4 = val;
      console.log(`当前页: ${val}`);
      if (this.selectrue == true) {
        this.indataMs(this.currentPage4, this.pageSize, this.form.goodsName);
      } else {
        this.indataTwo(this.currentPage4, this.pageSize);
      }
    },

    indataTwo(pageNum, pageSize) {
      seckillAddsApi.getFindSecAddsList(pageNum, pageSize).then(Response => {
        console.log(Response);
        this.goodData = Response.data.data.list;
        this.total = Response.data.data.total;
      });
    },

    indata() {
      seckillItemApi.getFindItemList().then(Response => {
        console.log(Response);
        this.tableData = Response.data.data;
      });
    },

    indataMs(pageNum, pageSize, goodsName) {
      if (goodsName != null) {
        this.selectrue = true;
      } else {
        this.selectrue = false;
      }
      console.log("筛选"+this.selectrue);
      seckillAddsApi
        .getFindSecAddsTwoList(pageNum, pageSize, goodsName)
        .then(Response => {
          this.goodData = Response.data.data.list;
          this.total = Response.data.data.total;
        });
    },
    // onSubmit(formInline) {
    //   this.$refs[formInline].validate(valid => {
    //     if (valid) {
    //       alert("submit!")
    //       this.visible = false
    //     } else {
    //       console.log("error submit!!")
    //       return false
    //     }
    //   })
    // },
    topSelect() {
      console.log("submit!");
      this.dialogVisible = true;
    }
  },
  mounted() {
    this.indata();
    this.indataTwo(this.currentPage4, this.pageSize);
  }
};
</script>
<style scoped>
.rightTop {
  float: right;
}
.fontColor {
  color: grey;
}
.addfrom {
  float: right;
  margin-right: 30px;
}
</style>
